<template>
  <div class="croppr">
    <el-dialog
      title="更换头像"
      :visible.sync="upFileVisible"
      width="800"
      :before-close="handleClose">
      <div style="overflow: hidden; text-align: center;margin: 0 auto;">
        <div class="chooseBox" style="cursor: pointer; margin: 20px;">
          <div class="chooseBox-input">
            <div>
              <input type="file" ref="upfile" id="upfile" @change="_upFile">
              <div id="cropprbox"></div>
            </div>
            <div class="choosebox-bg" style="color: #ffffff" v-if="isDefault">
              <i class="el-icon-upload2" style="font-size: 26px;margin-bottom: 10px;"></i>
              <span>头像上传</span>
            </div>
          </div>
          <div class="chooseBox-show"></div>
        </div>
        <div class="showBox" style="margin: 20px;">
          <canvas class="imgCanvas" id="imgCanvas"></canvas>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpFile">保  存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Croppr from 'croppr'
import '../../../node_modules/croppr/dist/croppr.min.css'
export default {
  name: "croppr",
  props: {
    upFileVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return{
      imgInfo: '',
      imgSize: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
      },
      imgUri: '',
      dataUri: '',
      isDefault: true
    }
  },
  methods: {
    submitUpFile () {
      this.$emit('_submitUpFile', false)
    },
    cancelsUpFile () {
      this.$emit('_cancelsUpFile', false)
    },
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.cancelsUpFile()
        })
        .catch(_ => {})
    },
    _upFile () {
      let _this = this
      let cropprBox = document.querySelector('#cropprbox')
      let file = document.querySelector("#upfile").files[0]
      let reader = new FileReader()
      _this.isDefault = false
      reader.readAsDataURL(file)
      reader.addEventListener("load", function () {
        _this.imgInfo = reader.result
        _this.createImg(cropprBox, reader.result)
      }, false)
      reader.addEventListener("loadend", function () {

      })
    },
    createImg (cropprBox, oSrc) {
      let _this = this
      _this.imgUri = oSrc
      cropprBox.innerHTML = '<img src="'+ oSrc +'" id="croppr">'
      let nowImg = document.querySelector('#croppr')
      nowImg.onload = () => {
        let croppr = new Croppr('#croppr', {
          aspectRatio: 1,
          onCropEnd: function(value) {
            _this.imgSize.x = value.x
            _this.imgSize.y = value.y
            _this.imgSize.width = value.width
            _this.imgSize.height = value.height
            _this.drawCanvas()
          }
        })
      }
    },
    drawCanvas () {
      let _this = this
      let dataUri = null
      let canvas = document.querySelector('#imgCanvas')
      let ctx  = canvas.getContext('2d')
      let img = new Image()
      canvas.width = 200
      canvas.height = 200
      img.crossOrigin = "Anonymous"
      img.src = _this.imgUri
      img.onload = function(){
        ctx.drawImage(img, _this.imgSize.x, _this.imgSize.y, _this.imgSize.width, _this.imgSize.height, 0, 0, 200, 200)
        dataUri = canvas.toDataURL("image/jpeg")
        _this.dataUri = dataUri
      }
    }
  }
}
</script>

<style scoped lang="less">
  .chooseBox{
    float: left;
    position: relative;
    .chooseBox-input{
      background: rgba(0,0,0,.4);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      #upfile{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
    .chooseBox-show{
      width: 400px;
      height: 400px;
      border: 1px solid #eee;

    }
  }
  .showBox{
    float: left;
    margin-left: 20px;
    width: 200px;
    height: 200px;
    border: 1px solid #eee;
    overflow: hidden;
  }
  .choosebox-bg{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
